<template>
  <div class="top">
    <p v-if="$store.state.editFlag" @click="edit">编辑</p>
    <p v-else @click="edit">完成</p>
    <p>购物车</p>
    <p @click="filterBtn">筛选</p>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { ref } from "vue";
export default {
  setup() {
    let store = useStore();
    function edit() {
      store.commit("editFlagBtn");
    }
    return { edit };
  },

  methods: {
    filterBtn() {
      this.$emit("isShowFlag");
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 33, 33);
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;
}
</style>
